<template>
    <div class="projectComponent" v-if="oItem" :style="{
      paddingTop: oItem.main.wrapperPT + 'px',
      paddingBottom: oItem.main.wrapperPB + 'px',
      paddingLeft: oItem.main.wrapperPLR + 'px',
      paddingRight: oItem.main.wrapperPLR + 'px',
    }" v-loading="isReLayout" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">





<div class="content" :style="{
    paddingTop: oItem.main.modulePT + 'px',
    paddingBottom: oItem.main.modulePB + 'px',
    paddingLeft: oItem.main.modulePLR + 'px',
    paddingRight: oItem.main.modulePLR + 'px',

    backgroundColor: oItem.main.wrapperBgColor||'transparent',
    backgroundImage: oItem.main.wrapperBgImg?('url(\''+oItem.main.wrapperBgImg+'\')'):'none',

    borderTopLeftRadius: oItem.main.wrapperBTR + 'px',
    borderTopRightRadius: oItem.main.wrapperBTR + 'px',
    borderBottomLeftRadius: oItem.main.wrapperBBR + 'px',
    borderBottomRightRadius: oItem.main.wrapperBBR + 'px',
}">


<p class="empty" v-if="oItem.main.list.length==0">
  还没有项目内容，请在右侧 <span style="color:red">项目内容</span> 模块添加
</p>



        <div class="wrapper" :class="oItem.main.listStyle" v-if="oItem.main.listStyle === 'row2'">
            <div class="left" :id="'rowsLeft' + id" v-if="oItem.main.rows.left.length > 0">
                <div class="item" v-for="iml in oItem.main.rows.left" :key="iml.proId" :style="{
            borderTopLeftRadius: oItem.main.moduleBTR + 'px',
            borderTopRightRadius: oItem.main.moduleBTR + 'px',
            borderBottomLeftRadius: oItem.main.moduleBBR + 'px',
            borderBottomRightRadius: oItem.main.moduleBBR + 'px',
            backgroundColor: oItem.main.moduleBgColor||'transparent',
            backgroundImage: oItem.main.moduleBgImg?('url(\''+oItem.main.moduleBgImg+'\')'):'none',
          }">
                    <div class="up" :class="
              (!oItem.main.showSubTitle && !oItem.main.showHighLight) ||
              (!iml.one && (!iml.list || iml.list.length == 0))
                ? 'simple'
                : ''
            ">
                        <div class="uLeft" :style="{width: oItem.main.logoSize + 'px'}">
                            <img v-if="iml.proLogo" :src="iml.proLogo" alt="" class="logo" :style="{
                  width: oItem.main.logoSize + 'px',
                  height: oItem.main.logoSize + 'px',
                }" />
                        </div>
                        <div class="uRight" :style="{
                            width: 'calc(100% - '+oItem.main.logoSize + 'px'+')'
                        }">
                            <p class="title" :style="{
                  fontSize: oItem.main.titleFontSize + 'px',
                  color: oItem.main.titleFontColor||'transparent',
                }">
                                {{ iml.proName }}
                            </p>
                            <p class="subTitle" v-if="oItem.main.showSubTitle" :style="{ color: oItem.main.subTitleFontColor||'transparent' }">
                                {{ iml.one }}
                            </p>
                        </div>
                    </div>
                    <div class="down" v-if="oItem.main.showHighLight && iml.list && iml.list.length > 0">
                        <div class="dItem" v-for="imll in iml.list" :key="imll.id">
                            <div class="dILeft">
                                <span class="value" :style="{ color: oItem.main.highLightFontColor||'transparent' }"><i>{{ imll.commissionValue }}</i>元/单</span>
                                <span class="name">{{ imll.commissionName }}</span>
                            </div>
                            <div class="dIRight">
                                <span class="value" :style="{ color: oItem.main.highLightFontColor||'transparent' }">{{ imll.balanceValue }}</span>
                                <span class="name">{{ imll.balanceName }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right" :id="'rowsRight' + id" v-if="oItem.main.rows.right.length > 0">
                <div class="item" v-for="iml in oItem.main.rows.right" :key="iml.proId" :style="{
            borderTopLeftRadius: oItem.main.moduleBTR + 'px',
            borderTopRightRadius: oItem.main.moduleBTR + 'px',
            borderBottomLeftRadius: oItem.main.moduleBBR + 'px',
            borderBottomRightRadius: oItem.main.moduleBBR + 'px',
            backgroundColor: oItem.main.moduleBgColor||'transparent',
            backgroundImage: oItem.main.moduleBgImg?('url(\''+oItem.main.moduleBgImg+'\')'):'none',
          }">
                    <div class="up" :class="
              (!oItem.main.showSubTitle && !oItem.main.showHighLight) ||
              (!iml.one && (!iml.list || iml.list.length == 0))
                ? 'simple'
                : ''
            ">
                        <div class="uLeft" :style="{width: oItem.main.logoSize + 'px'}">
                            <img v-if="iml.proLogo" :src="iml.proLogo" alt="" class="logo" :style="{
                  width: oItem.main.logoSize + 'px',
                  height: oItem.main.logoSize + 'px',
                }" />
                        </div>
                        <div class="uRight" :style="{
                            width: 'calc(100% - '+oItem.main.logoSize + 'px'+')'
                        }">
                            <p class="title" :style="{
                  fontSize: oItem.main.titleFontSize + 'px',
                  color: oItem.main.titleFontColor||'transparent',
                }">
                                {{ iml.proName }}
                            </p>
                            <p class="subTitle" v-if="oItem.main.showSubTitle" :style="{ color: oItem.main.subTitleFontColor||'transparent' }">
                                {{ iml.one }}
                            </p>
                        </div>
                    </div>
                    <div class="down" v-if="oItem.main.showHighLight && iml.list && iml.list.length > 0">
                        <div class="dItem" v-for="imll in iml.list" :key="imll.id">
                            <div class="dILeft">
                                <span class="value" :style="{ color: oItem.main.highLightFontColor||'transparent' }"><i>{{ imll.commissionValue }}</i>元/单</span>
                                <span class="name">{{ imll.commissionName }}</span>
                            </div>
                            <div class="dIRight">
                                <span class="value" :style="{ color: oItem.main.highLightFontColor||'transparent' }">{{ imll.balanceValue }}</span>
                                <span class="name">{{ imll.balanceName }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="wrapper" :class="oItem.main.listStyle" v-if="oItem.main.listStyle === 'row3'">
            <div class="left" :id="'rowsLeft' + id" v-if="oItem.main.rows.left.length > 0">
                <div class="item" v-for="iml in oItem.main.rows.left" :key="iml.proId" :style="{
            borderTopLeftRadius: oItem.main.moduleBTR + 'px',
            borderTopRightRadius: oItem.main.moduleBTR + 'px',
            borderBottomLeftRadius: oItem.main.moduleBBR + 'px',
            borderBottomRightRadius: oItem.main.moduleBBR + 'px',
            backgroundColor: oItem.main.moduleBgColor||'transparent',
            backgroundImage: oItem.main.moduleBgImg?('url(\''+oItem.main.moduleBgImg+'\')'):'none',
          }">
                    <div class="logo">
                        <img v-if="iml.proLogo" :src="iml.proLogo" alt="" class="logo" :style="{
                width: oItem.main.logoSize + 'px',
                height: oItem.main.logoSize + 'px',
              }" />
                    </div>

                    <p class="title" :style="{
              fontSize: oItem.main.titleFontSize + 'px',
              color: oItem.main.titleFontColor||'transparent',
            }">
                        {{ iml.proName }}
                    </p>

                    <p class="subTitle" v-if="oItem.main.showSubTitle" :style="{ color: oItem.main.subTitleFontColor||'transparent' }">
                        {{ iml.one }}
                    </p>

                    <div class="commission" v-if="oItem.main.showHighLight && iml.list && iml.list.length > 0">
                        <p v-for="imll in iml.list" :key="imll.id">
                            <span>{{ imll.commissionValue }}</span>元/单
                        </p>
                    </div>
                </div>
            </div>

            <div class="center" :id="'rowsCenter' + id" v-if="oItem.main.rows.center.length > 0">
                <div class="item" v-for="iml in oItem.main.rows.center" :key="iml.proId" :style="{
            borderTopLeftRadius: oItem.main.moduleBTR + 'px',
            borderTopRightRadius: oItem.main.moduleBTR + 'px',
            borderBottomLeftRadius: oItem.main.moduleBBR + 'px',
            borderBottomRightRadius: oItem.main.moduleBBR + 'px',
            backgroundColor: oItem.main.moduleBgColor||'transparent',
            backgroundImage: oItem.main.moduleBgImg?('url(\''+oItem.main.moduleBgImg+'\')'):'none',
          }">
                    <div class="logo">
                        <img v-if="iml.proLogo" :src="iml.proLogo" alt="" class="logo" :style="{
                width: oItem.main.logoSize + 'px',
                height: oItem.main.logoSize + 'px',
              }" />
                    </div>

                    <p class="title" :style="{
              fontSize: oItem.main.titleFontSize + 'px',
              color: oItem.main.titleFontColor||'transparent',
            }">
                        {{ iml.proName }}
                    </p>

                    <p class="subTitle" v-if="oItem.main.showSubTitle" :style="{ color: oItem.main.subTitleFontColor||'transparent' }">
                        {{ iml.one }}
                    </p>

                    <div class="commission" v-if="oItem.main.showHighLight && iml.list && iml.list.length > 0">
                        <p v-for="imll in iml.list" :key="imll.id">
                            <span>{{ imll.commissionValue }}</span>元/单
                        </p>
                    </div>
                </div>
            </div>

            <div class="right" :id="'rowsRight' + id" v-if="oItem.main.rows.right.length > 0">
                <div class="item" v-for="iml in oItem.main.rows.right" :key="iml.proId" :style="{
            borderTopLeftRadius: oItem.main.moduleBTR + 'px',
            borderTopRightRadius: oItem.main.moduleBTR + 'px',
            borderBottomLeftRadius: oItem.main.moduleBBR + 'px',
            borderBottomRightRadius: oItem.main.moduleBBR + 'px',
            backgroundColor: oItem.main.moduleBgColor||'transparent',
            backgroundImage: oItem.main.moduleBgImg?('url(\''+oItem.main.moduleBgImg+'\')'):'none',
          }">
                    <div class="logo">
                        <img v-if="iml.proLogo" :src="iml.proLogo" alt="" class="logo" :style="{
                width: oItem.main.logoSize + 'px',
                height: oItem.main.logoSize + 'px',
              }" />
                    </div>

                    <p class="title" :style="{
              fontSize: oItem.main.titleFontSize + 'px',
              color: oItem.main.titleFontColor||'transparent',
            }">
                        {{ iml.proName }}
                    </p>

                    <p class="subTitle" v-if="oItem.main.showSubTitle" :style="{ color: oItem.main.subTitleFontColor||'transparent' }">
                        {{ iml.one }}
                    </p>

                    <div class="commission" v-if="oItem.main.showHighLight && iml.list && iml.list.length > 0">
                        <p v-for="imll in iml.list" :key="imll.id">
                            <span>{{ imll.commissionValue }}</span>元/单
                        </p>
                    </div>
                </div>
            </div>
        </div>


        <div class="wrapper" :class="oItem.main.listStyle" v-if="oItem.main.listStyle === 'list'">
            <div class="item" v-for="iml in oItem.main.list" :key="iml.proId" :style="{
            borderTopLeftRadius: oItem.main.moduleBTR + 'px',
            borderTopRightRadius: oItem.main.moduleBTR + 'px',
            borderBottomLeftRadius: oItem.main.moduleBBR + 'px',
            borderBottomRightRadius: oItem.main.moduleBBR + 'px',
            backgroundColor: oItem.main.moduleBgColor||'transparent',
            backgroundImage: oItem.main.moduleBgImg?('url(\''+oItem.main.moduleBgImg+'\')'):'none',
        }">
                <div class="left" :class="
            (!oItem.main.showSubTitle && !oItem.main.showHighLight) ||
            (!iml.one && (!iml.list || iml.list.length == 0))
              ? 'noRight'
              : ''
          ">
                    <img v-if="iml.proLogo" :src="iml.proLogo" alt="" class="logo" :style="{
              width: oItem.main.logoSize + 'px',
              height: oItem.main.logoSize + 'px',
            }" />
                    <p class="title" :style="{
              color: oItem.main.titleFontColor||'transparent',
              fontSize: oItem.main.titleFontSize + 'px',
            }">
                        {{ iml.proName }}
                    </p>
                </div>
                <div class="right" v-if="
            (oItem.main.showSubTitle && iml.one) ||
            (oItem.main.showHighLight && iml.list && iml.list.length > 0)
          ">
                    <p class="subTitle" v-if="oItem.main.showSubTitle" :style="{ color: oItem.main.subTitleFontColor||'transparent' }">
                        {{ iml.one }}
                    </p>
                    <div class="formItem" v-if="oItem.main.showHighLight">
                        <div class="fItem" v-for="imll in iml.list" :key="imll.id">
                            <div class="fLeft">
                                <span class="value" :style="{ color: oItem.main.highLightFontColor||'transparent' }"><i>{{ imll.commissionValue }}</i>元/单</span>
                                <span class="name">{{ imll.commissionName }}</span>
                            </div>
                            <div class="fRight">
                                <span class="value" :style="{ color: oItem.main.highLightFontColor||'transparent' }">{{ imll.balanceValue }}</span>
                                <span class="name">{{ imll.balanceName }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
    name: "projectComponent",
    data() {
        return {
            oItem: null,
            // rowsPushIndex: 0, //双列或三列，展示瀑布流布局时，显示当应该载入哪个位置上的元素了
            leftHeight: 0, //双列或三列，显示左列的容器高度
            centerHeight: 0, //双列或三列，显示中间列的容器高度
            rightHeight: 0, //双列或三列，显示右列的容器高度
            backgroundImage: "",
            isReLayout: false, //在否正在绘制布局，绘制中的话，触发重绘后，先laoding阻止，等完成后再继续执行
        };
    },
    created() {},
    props: ["item", "ename", "id"],
    components: {},
    mounted() {
        this.$nextTick(() => {
            this.init();
        });
        const emitName = this.ename + this.id;
        // //console.log(emitName);
        Bus.$off(emitName);
        Bus.$on(emitName, (control) => {
            //console.log("projectComponent被通知更新");
            this.isReLayout = false;
            this.leftHeight = 0;
            this.centerHeight = 0;
            this.rightHeight = 0;
            this.backgroundImage = "";
            this.oItem = null;
            // //console.log(1);
            // this.$nextTick(() => {
                // //console.log(2);
                this.oItem = JSON.parse(control);
                this.initSetData();
            // });
        });
    },
    methods: {
        //页面初始化
        init() {
            // //console.log("进入init");
            this.oItem = null;
            this.oItem = JSON.parse(JSON.stringify(this.item));
            this.initSetData();
        },
        initSetData() {
            // //console.log("initSetData() 设置显示数据");
            // //console.log("oItem listStyle： ",this.oItem.main.listStyle);
            this.backgroundImage = `url("${this.oItem.main.projectWrapperBgImg}")`;
            if(this.oItem.main.list.length==0) {
              return false;
            }
            if (
                this.oItem.main.listStyle === "row2" ||
                this.oItem.main.listStyle === "row3"
            ) {
                // //console.log(this.oItem.main.listStyle,this.isReLayout);
                if (this.isReLayout) {
                    // //console.log("当前绘制中，新请求等待");
                    this.interceptorHandle();
                } else {
                    // //console.log("init中开始执行绘制中");
                    this.initSetRowsData();
                }
            } else {
                // //console.log("当前listStyle： ",this.oItem.main.listStyle);
                // //console.log("list: ",this.oItem.main.list);
            }
        },
        //若重绘渲染未结束，设置新的重绘事件等待，待重绘完成后在执行
        interceptorHandle() {
            setTimeout(() => {
                if (this.isReLayout) {
                    // //console.log("当前绘制中，新请求等待");
                    this.interceptorHandle();
                } else {
                    // //console.log("init中开始执行绘制中");
                    this.initSetRowsData();
                }
            }, 1000);
        },
        //页面初始化时根据配置的列，设置不同的数据，展现出来
        initSetRowsData() {
            // //console.log("初始化绘制第一行");

            // //console.log("设置正在渲染状态",this.oItem.main.list);
            this.isReLayout = true;

            let rowsPushIndex = 0;

            let len = this.oItem.main.list.length;
            // //console.log("len ", len,this.oItem.main.list,this.oItem.main.list.length);
            this.oItem.main.rows.left = [];
            this.oItem.main.rows.right = [];

            if (rowsPushIndex < len && this.oItem.main.list[rowsPushIndex]) {
                const oItem = this.oItem.main.list[rowsPushIndex];
                if(!this.oItem.main.rows.left.some(row=>row.proId == oItem.proId)) {
                  this.oItem.main.rows.left.push(oItem);
                }
                // //console.log("左侧列表载入");
                rowsPushIndex++;
            }

            if (this.oItem.main.listStyle === "row3") {
                this.oItem.main.rows.center = [];
                if (
                    rowsPushIndex < len &&
                    this.oItem.main.list[rowsPushIndex]
                ) {
                    const oItem = this.oItem.main.list[rowsPushIndex];
                    
                    if(!this.oItem.main.rows.center.some(row=>row.proId == oItem.proId)) {
                      this.oItem.main.rows.center.push(oItem);
                    }
                    // //console.log("中间列表载入");
                    rowsPushIndex++;
                }
            }

            if (rowsPushIndex < len && this.oItem.main.list[rowsPushIndex]) {
                const oItem = this.oItem.main.list[rowsPushIndex];
                if(!this.oItem.main.rows.right.some(row=>row.proId == oItem.proId)) {
                  this.oItem.main.rows.right.push(oItem);
                }
                
                // //console.log("右侧列表载入");
                rowsPushIndex++;
            }

            this.$nextTick(() => {
                if (document.getElementById(`rowsLeft${this.id}`)) {
                    this.leftHeight = document.getElementById(
                        `rowsLeft${this.id}`
                    ).offsetHeight;
                    // //console.log("更新左侧容器高度");
                }

                if (this.oItem.main.listStyle === "row3") {
                    if (
                        (this.centerHeight = document.getElementById(
                            `rowsCenter${this.id}`
                        ))
                    ) {
                        this.centerHeight = document.getElementById(
                            `rowsCenter${this.id}`
                        ).offsetHeight;
                        // //console.log("更新中间容器高度");
                    }
                }

                if (document.getElementById(`rowsRight${this.id}`)) {
                    this.rightHeight = document.getElementById(
                        `rowsRight${this.id}`
                    ).offsetHeight;
                    // //console.log("右侧中间容器高度");
                }

                // //console.log("初始化第一次后：",rowsPushIndex,len);

                this.loadDomInWrapper(
                    this.oItem.main.listStyle,
                    rowsPushIndex,
                    len
                );
            });
        },
        //双列或三列时，载入数据(等用于载入DOM到容器中)
        loadDomInWrapper(listStyle, rowsPushIndex, len) {
            // //console.log("递归渲染瀑布流", listStyle,rowsPushIndex,len);
            let rpi = rowsPushIndex;

            if (rpi < len) {
                // //console.log("递归渲染瀑布流 - 未完成, rpi = ", rpi, len);
                if (listStyle === "row2") {
                    if (this.rightHeight < this.leftHeight) {
                        if (this.oItem.main.list[rpi]) {
                            const item = this.oItem.main.list[rpi];
                            if(!this.oItem.main.rows.right.some(row=>row.proId == item.proId)) {
                              this.oItem.main.rows.right.push(item);
                            }
                            
                            rpi++;
                            // //console.log("两列布局 右侧载入 rpi",rpi);
                        }
                    } else {
                        if (this.oItem.main.list[rpi]) {
                            const item = this.oItem.main.list[rpi];
                           
                            if(!this.oItem.main.rows.left.some(row=>row.proId == item.proId)) {
                              this.oItem.main.rows.left.push(item);
                            }
                            rpi++;
                            // //console.log("两列布局 左侧载入 rpi",rpi);
                        }
                    }
                } else if (listStyle === "row3") {
                    const rh = this.rightHeight,
                        lh = this.leftHeight,
                        ch = this.centerHeight;

                    if (rh < lh && rh < ch) {
                        if (this.oItem.main.list[rpi]) {
                            const oItem = this.oItem.main.list[rpi];
                           
                            if(!this.oItem.main.rows.right.some(row=>row.proId == oItem.proId)) {
                              this.oItem.main.rows.right.push(oItem);
                            }
                            rpi++;
                        }
                    } else if (ch < lh && ch <= rh) {
                        if (this.oItem.main.list[rpi]) {
                            const oItem = this.oItem.main.list[rpi];
                            if(!this.oItem.main.rows.center.some(row=>row.proId == oItem.proId)) {
                              this.oItem.main.rows.center.push(oItem);
                            }
                            
                            rpi++;
                        }
                    } else {
                        if (this.oItem.main.list[rpi]) {
                            const oItem = this.oItem.main.list[rpi];
                            
                            if(!this.oItem.main.rows.left.some(row=>row.proId == oItem.proId)) {
                              this.oItem.main.rows.left.push(oItem);
                            }
                            rpi++;
                        }
                    }
                }
                this.$nextTick(() => {
                    if (
                        (this.leftHeight = document.getElementById(
                            `rowsLeft${this.id}`
                        ))
                    ) {
                        this.leftHeight = document.getElementById(
                            `rowsLeft${this.id}`
                        ).offsetHeight;
                    }
                    if (listStyle === "row3") {
                        if (document.getElementById(`rowsCenter${this.id}`)) {
                            this.centerHeight = document.getElementById(
                                `rowsCenter${this.id}`
                            ).offsetHeight;
                        }
                    }
                    if (document.getElementById(`rowsRight${this.id}`)) {
                        this.rightHeight = document.getElementById(
                            `rowsRight${this.id}`
                        ).offsetHeight;
                    }
                    // //console.log("开始递归, listStyle,rpi, len",listStyle, rpi, len);
                    this.loadDomInWrapper(listStyle, rpi, len);
                });
            } else {
                // //console.log("递归渲染瀑布流 - 已完成");
                this.isReLayout = false;
                // //console.log("改变状态", this.isReLayout);
            }
        },
    },
    computed: mapState(["decorate"]),
    watch: {},
};
</script>
<style scoped lang="scss">
.projectComponent {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    .content{
        box-sizing: border-box;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: scroll;
    }
    .wrapper {
        display: flex;
        box-sizing: border-box;
        .item {
            box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
            border-radius: 4px;
            border: 1px solid #ebeef5;
            background-color: #fff;
            overflow: hidden;
            color: #303133;
            transition: 0.3s;
            padding: 10px;
            box-sizing: border-box;
            display: flex;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: scroll;
        }
        &.row2 {
            display: block;
            overflow: hidden;
            .left {
                float: left;
                margin-right: 14px;
            }
            .right {
                float: right;
            }
            .left,
            .right {
                width: calc(50% - 7px);
                .item {
                    align-items: center;
                    margin-bottom: 14px;width: 100%;
                    display: flex;
                    flex-direction: column;
                    .up {
                        width: 100%;
                        display: flex;overflow: hidden;
                        justify-content: flex-start;
                        &.simple {
                            align-items: center;
                            .uRight {
                                .title {
                                    margin-bottom: 0px;
                                }
                            }
                        }
                        .uLeft {
                            .logo {
                                border-radius: 100%;
                                display: block;
                            }
                        }
                        .uRight {
                            padding-left: 10px;
                            display: flex;
                            flex-direction: column;
                            box-sizing: border-box;
                            justify-content: center;
                            .title {
                                display: block;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                                margin-bottom: 5px;
                            }
                            .subTitle {
                                font-size: 12px;
                                text-overflow: ellipsis;
                                color: #666;
                                white-space: nowrap;
                                overflow: hidden;
                                display: block;width:100%;
                            }
                        }
                    }
                    .down {
                        width: 100%;
                        display: flex;
                        padding-top: 15px;
                        flex-direction: column;
                        font-size: 12px;
                        .dItem {
                            display: flex;
                            justify-content: space-between;
                            &:last-child {
                                .dILeft {
                                    .name {
                                        margin-bottom: 0;
                                    }
                                }
                            }
                            .dILeft {
                                width: 50%;
                                border-right: 1px solid #eee;
                                box-sizing: border-box;
                                display: flex;
                                flex-direction: column;
                                align-items: flex-start;
                                .value {
                                    margin-bottom: 3px;
                                    i {
                                        font-style: normal;
                                        font-size: 16px;
                                    }
                                }
                                .name {
                                    color: #999;
                                    margin-bottom: 10px;
                                }
                            }
                            .dIRight {
                                display: flex;
                                flex-direction: column;
                                align-items: flex-end;
                                .value {
                                    margin-bottom: 3px;
                                    i {
                                        font-style: normal;
                                        font-size: 16px;
                                    }
                                }
                                .name {
                                    color: #999;
                                }
                            }
                        }
                    }
                }
            }
        }
        &.row3 {
            display: block;
            overflow: hidden;
            .left,
            .center {
                float: left;
            }
            .center {
                margin: 0 15px;
            }
            .right {
                float: right;
            }
            .left,
            .center,
            .right {
                width: calc(33.33% - 10px);
                .item {
                    margin-bottom: 15px;
                    flex-direction: column;
                    div.logo {
                        padding: 5px 0 10px;
                        border-bottom: 1px solid #eee;
                        margin-bottom: 10px;
                        width: 100%;
                        display: flex;
                        justify-content: center;
                    }
                    .title {
                        color: #333;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        display: block;
                        text-align: center;
                    }
                    .subTitle {
                        font-size: 12px;
                        padding-top: 10px;
                        padding-bottom: 5px;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        display: block;width:100%; box-sizing: border-box;
                        text-align: center;
                        color: #666;
                    }
                    .commission {
                        font-size: 12px;
                        padding-top: 10px;
                        p {
                            background-color: #ff4500;
                            color: #fff;
                            border-radius: 20px;
                            width: 100%;
                            margin: 0 0 10px;
                            height: 24px;
                            text-align: center;
                            line-height: 24px;
                            &:last-child {
                                margin-bottom: 0;
                            }
                        }
                    }
                }
            }
        }
        &.list {
            flex-direction: column;
            .item {
                margin-bottom: 15px;
                &:last-child {
                    margin-bottom: 0;
                }
                .left {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    width: 28%;
                    border-right: 1px solid #eee;
                    box-sizing: border-box;
                    .logo {
                        margin-bottom: 10px;
                    }
                    .title {
                        color: #333;
                    }
                    &.noRight {
                        flex-direction: row;
                        border: none;
                        width: 100%;
                        justify-content: flex-start;
                        padding-left: 15px;
                        box-sizing: border-box;
                        img {
                            margin-bottom: 0;
                            margin-right: 20px;
                        }
                    }
                }
                .right {
                    width: 70%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    box-sizing: border-box;
                    padding-left: 25px;
                    .subTitle {
                        margin-bottom: 10px;
                        font-size: 14px;
                        color: #333;width:100%;text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        padding-top: 5px;
                        box-sizing: border-box;
                    }
                    .formItem {
                        display: flex;
                        flex-direction: column;
                        font-size: 12px;
                        margin-right: 20px;
                        .fItem {
                            display: flex;
                            justify-content: space-between;
                            margin-bottom: 10px;
                            &:last-child {
                                margin-bottom: 0;
                            }
                            .fLeft,
                            .fRight {
                                display: flex;
                                flex-direction: column;
                                .name {
                                    color: #999;
                                }
                                .value {
                                    margin-bottom: 3px;
                                    i {
                                        font-style: normal;
                                        font-size: 16px;
                                    }
                                }
                            }
                            .fRight {
                                align-items: flex-end;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
